<template>

  <el-button type="primary" @click="add()" v-hasPermission="'clue:add'">录入线索</el-button>
  <el-button type="success" @click="importExcel()" v-hasPermission="'clue:import'">导入线索 (Excel)</el-button>
  <el-button type="danger"  @click="batchRemove()" v-hasPermission="'clue:remove'">批量删除</el-button>

  <!-- 线索列表 -->
  <!--
    :data="clueList"  单向绑定表格数据

    @selection-change="handleSelectionChange"   选择改变事件
      勾选或者取消勾选复选框时触发该函数
      注意：这个函数使用的时候不需要加括号，函数触发时会自动传入参数，参数是勾选了复选框的选项数组
  -->
  <el-table
      :data="clueList"
      style="width: 100%"
      @selection-change="handleSelectionChange">

    <!-- type="selection" 复选框 -->
    <el-table-column type="selection" width="40" />
    <!-- type="index"  序号以1递增 -->
    <el-table-column type="index" label="序号" width="55" />
    <!-- 要想当页面宽度改变时，展示数据的不换行，可以给el-table-column标签单独设置宽度 -->
    <el-table-column property="ownerDO.name" label="负责人" width="80" />
    <el-table-column property="activityDO.name" label="所属活动" />
    <el-table-column property="fullName" label="姓名" width="80" />
    <el-table-column property="appellationDO.typeValue" label="称呼" width="60" />
    <el-table-column property="phone" label="手机" width="120" />
    <el-table-column property="weixin" label="微信" width="120" />
    <el-table-column property="needLoanDO.typeValue" label="是否贷款" />
    <el-table-column property="intentionStateDO.typeValue" label="意向状态" />
    <el-table-column property="intentionProductDO.name" label="意向产品" width="100" />
    <el-table-column property="stateDO.typeValue" label="线索状态" />
    <el-table-column property="sourceDO.typeValue" label="线索来源" />
    <el-table-column property="nextContactTime" label="下次联系时间" width="165" />
    <el-table-column label="操作" width="230" >
      <!-- 作用域插槽 -->
      <template #default="scope">
        <!-- scope.row.id  获取当前行上数据对象的id -->
        <el-button type="primary" @click="detail(scope.row.id)" v-hasPermission="'clue:detail'">详情</el-button>
        <el-button type="success" @click="edit(scope.row.id)"   v-hasPermission="'clue:edit'"  >编辑</el-button>
        <el-button type="danger"  @click="remove(scope.row.id)" v-hasPermission="'clue:remove'">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!--
    分页功能
      layout="prev, pager, next"  组件布局，子组件名用逗号分隔  prev, pager, next, jumper, ->, total
      @prev-click="toPage" 点击上一页触发函数
      @next-click="toPage" 点击下一页触发函数
      @current-change="toPage"  当前页发生改变时触发函数
      注意：这里的函数不要加括号，element-plus会自动传递一个参数（当前页数）
  -->
  <el-pagination
      background
      layout="prev, pager, next"
      :page-size="this.pageSize"
      :total="this.total"
      @prev-click="toPage"
      @next-click="toPage"
      @current-change="toPage"/>

  <!-- 导入线索Excel的弹窗（对话框） -->
  <!--
    v-model                值为true时，显示对话框，false隐藏对话框
    center                 内容居中
    draggable              可拖拽的对话框
    :close-on-click-modal  是否可以通过点击对话框外的页面关闭对话框
    :destroy-on-close      对话框关闭时，是否销毁其中元素（例如：验证规则的提示信息）
  -->
  <el-dialog
      v-model="importExcelDialogVisible"
      title="导入线索Excel"
      width="55%"  center  draggable
      :close-on-click-modal="false"
      :destroy-on-close="true">

    <!-- 文件上传 -->
    <!--
      method="post"    设置文件上传请求方法，默认就是post
      accept           选择文件窗口默认显示的文件类型，多个类型使用逗号隔开
      ref="uploadRef"  组件的引用，可以通过this.$refs.uploadRef引用该组件，调用该组件的submit方法会自动调用httpRequest方法，也就是:http-request属性绑定的方法（在这个方法中上传文件）
      :http-request    绑定一个函数，覆盖默认的XmlHttpRequest行为，允许自行实现上传文件的请求，可以在文件上传时做一些其他操作（注意：绑定的函数不要加括号，否则element-plus无法传入参数）
      :auto-upload     是否开启文件的自动上传
    -->
    <el-upload
        method="post"
        accept=".xls , .xlsx"
        ref="uploadRef"
        :http-request="uploadFile"
        :auto-upload="false" >

      <template #trigger>
        <el-button type="primary">选择Excel文件</el-button>
      </template>
      仅支持后缀名为.xls或.xlsx的文件

      <template #tip>
        <div class="fileTip">
          重要提示：
          <ul>
            <li>上传仅支持后缀名为.xls或.xlsx的文件；</li>
            <li>给定Excel文件的第一行将视为字段名；</li>
            <li>请确认您的文件大小不超过50MB；</li>
            <li>日期值以文本形式保存，必须符合yyyy-MM-dd格式；</li>
            <li>日期时间以文本形式保存，必须符合yyyy-MM-dd HH:mm:ss的格式；</li>
          </ul>
        </div>
      </template>
    </el-upload>

    <template #footer>
      <el-button type="primary" @click="importExcelSubmit()">导入</el-button>
      <el-button @click="this.importExcelDialogVisible = false">关闭</el-button>
    </template>
  </el-dialog>

</template>

<script>
import {doDelete, doGet, doPost} from "../http/httpRequest.js";
import {messageConfirm, messageTip} from "../util/util.js";

  export default {
    name: "ClueView",

    // 注入父组件的函数
    inject: ['reload'],

    data() {
      return {
        // 线索列表对象
        clueList: [
          {
            ownerDO: {},
            activityDO: {},
            appellationDO: {},
            needLoanDO: {},
            intentionStateDO: {},
            intentionProductDO: {},
            stateDO: {},
            sourceDO: {}
          }
        ],

        pageSize: 0,  // 每页条数
        total: 0,     // 总条数

        // 导入线索弹窗是否可见
        importExcelDialogVisible: false,

        // 存放线索id的数组
        clueIdList: []
      }
    },

    // 钩子函数，页面渲染完成后自动执行
    mounted() {
      // 页面渲染完成后查询第一页线索
      this.loadClueList(1);
    },

    methods: {
      // 勾选或者取消勾选复选框时触发该函数，并自动传入参数（选项数组）
      handleSelectionChange(selectionItemArray) {
        // 每次触发该函数后，都需要先将存放线索id的数组清空，保证数据的真实性
        this.clueIdList = [];

        // 遍历选项数组
        selectionItemArray.forEach( (clue) => {
          // 将勾选线索的id存入线索id数组
          this.clueIdList.push(clue.id);
        })
      },

      loadClueList(current) {
        // 向后端发送请求
        doGet("/api/clue/list", {
          // 要查询第几页的数据
          current: current
        }).then( (resp) => {
          if (resp.data.code === 200) {
            this.clueList = resp.data.data.list;
            this.pageSize = resp.data.data.pageSize;
            this.total = resp.data.data.total;
          } else {
            messageTip("线索列表获取失败", "error");
          }
        })
      },

      // 分页函数，当前页数发生改变时触发
      toPage(current) {
        // current这个参数是element-plus自动传过来，当前页数
        this.loadClueList(current);
      },

      // 导入线索Excel按钮
      importExcel() {
        // 弹出导入线索的对话框
        this.importExcelDialogVisible = true;
      },

      // 导入按钮
      importExcelSubmit() {
        // 手动上传文件，调用submit()方法会自动调用httpRequest方法
        this.$refs.uploadRef.submit();
      },

      // 文件上传函数（上传文件的处理，上传文件的真正请求提交）
      uploadFile(param) {
        // element-plus组件会自动传一个参数，通过 参数.file 可以获取到要上传的文件

        // 通过参数获取文件名，使用split(".")方法，将文件名分割开
        // 例如：'clue.xlsx'  --->  ['clue', 'xlsx']
        let fileNameArray = param.file.name.split(".")
        // 文件名中可能有多个 . 所以取数组最后一个下标上的字符串，就是文件后缀名
        let suffix = fileNameArray[fileNameArray.length - 1];
        // 判断文件后缀名是否符合要求
        if (!("xls" === suffix || "xlsx" === suffix)) {
          // 不符合要求，弹出提示信息
          messageTip("文件格式不符合要求", "warning");
          return ;
        }

        // 从参数中取得要上传的文件
        let file = param.file;

        // 使用FormData对象传入文件对象（注意：不能使用json字符串的形式提交）
        let formData = new FormData();
        formData.append("file", file);

        // 向后端发送请求
        doPost("/api/clue/importExcel", formData).then( (resp) => {
          if (resp.data.code === 200) {
            messageTip("导入成功", "success");

            // 清空已上传的文件列表
            this.$refs.uploadRef.clearFiles();
            // 刷新页面
            this.reload();
          } else {
            messageTip("导入失败，请检查文件内容是否符合要求", "error");
          }
        })
      },

      // 录入线索按钮
      add() {
        // 跳转路由
        this.$router.push("/dashboard/clue/add");
      },

      // 编辑按钮
      edit(id) {
        // 跳转路由
        this.$router.push("/dashboard/clue/edit/" + id);
      },

      // 详情按钮
      detail(id) {
        // 跳转路由
        this.$router.push("/dashboard/clue/detail/" + id);
      },

      // 删除按钮
      remove(id) {
        // 弹出确认框
        messageConfirm("确认删除该数据吗？").then(() => {
          // 向后端发送请求
          doDelete("/api/clue/remove/" + id, { }).then( (resp) => {
            if (resp.data.code === 200) {
              messageTip("删除成功", "success");
              // 刷新页面
              this.reload();
            } else {
              messageTip("删除失败，原因：" + resp.data.msg, "error");
            }
          })
        }).catch(() => {
          messageTip("取消删除", "warning");
        })
      },

      // 批量删除
      batchRemove() {
        // 先判断是否勾选了数据
        if (this.clueIdList.length > 0) {

          // 弹出确认框
          messageConfirm("确认删除这些数据吗？").then(() => {
            // 将数组转换为字符串后传参
            let ids = this.clueIdList.join(',');

            // 勾选了数据，向后端发送请求
            doDelete("/api/clue/batchRemove", {
              ids: ids
            }).then( (resp) => {
              if (resp.data.code === 200) {
                messageTip("删除成功", "success");
                // 刷新页面
                this.reload();
              } else {
                messageTip("删除失败，原因：" + resp.data.msg, "error");
              }
            })
          }).catch(() => {
            messageTip("取消删除", "warning");
          })
        } else {
          // 没有勾选数据，弹出提示信息
          messageTip("没有勾选数据", "warning");
        }
      }
    }
  }
</script>

<style scoped>

  /* 表格 */
  .el-table {
    margin-top: 20px;   /* 上边距 */
  }

  /* 分页栏 */
  .el-pagination {
    margin-top: 20px;   /* 上边距 */
  }

  /* 导入Excel的提示 */
  .fileTip {
    margin-top: 20px;   /* 上边距 */
  }

</style>

